/**
 * Created by python on 18-11-11.
 */
let app = new Vue({
    el: '#app',
    data: {
        host: "http://127.0.0.1:8000",
        question:'',
        answers:[],
        comment:[],
        pk:'',
        answers_content:'',
        answer_id:'',
        comment_content:'',
        user_id:sessionStorage.user_id || localStorage.user_id,
        username:sessionStorage.username || localStorage.username,
        avatar:'img/widget-photo.png',
        token:sessionStorage.token || localStorage.token,
        mobile:'',
        labels:[], // 导航标签
        cat:0,
        like_state:'0',





    },
    computed: {
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数



    },

    mounted:function () {
        // 一加载就需要做的，直接是代码
           if (this.user_id && this.token) {
               axios.get(this.host + '/user/', {
                   // 向后端传递JWT token的方法
                   headers: {
                       'Authorization': 'JWT ' + this.token
                   },
                   responseType: 'json',
               })
                   .then(response => {
                       // 加载用户数据
                       this.user_id = response.data.id;
                       this.username = response.data.username;
                       this.mobile = response.data.mobile;
                       this.avatar = response.data.avatar;
                   })
                   .catch(error => {
                       console.log(error.response.data)
                   })
           }
            this.pk = this.get_query_string('pk');


            this.get_label();
            this.get_question_detail();
            this.get_answer_list();

    },

    methods: {
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数
         logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            this.flush()

        },
        flush(){
            location.reload()
        },
        onSubmit(){
            return false
        },

        get_query_string(name, def_value) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return def_value;
        },

        get_answer_list: function () {
            axios.get(this.host + '/answer/' + this.pk + '/', {
                responseType: 'json'
            })

                .then(response => {
                    this.answers = response.data

                })
                .catch(error => {
                    console.log(error.response.data)
                })
        },

        get_question_detail: function () {
            axios.get(this.host + '/question/detail/' + this.pk + '/', {
                responseType: 'json'
            })

                .then(response => {
                    this.question = response.data


                })
                .catch(error => {
                    console.log(error.response.data)
                })

        },


        on_answer: function () {
            axios.post(this.host + '/answer/' + this.pk + '/', {
                content: this.answers_content
            }, {
                headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    alert('回答成功');


                })
                .catch(error => {

                    alert('请登陆');
                    location.href='/login.html'
                    console.log(error.response.data)

                })

        },
        add_comment: function () {
            axios.post(this.host + '/comment/' + this.answer_id + '/', {
                content: this.comment_content
            }, {headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    alert('评论成功');
                    this.flush()
                })
                .catch(error => {
                    console.log(error.response.data);
                    alert('评论失败,请登录');

                })

        },

        get_label: function () {
            axios.get(this.host + '/navigation_label/', {

                responseType: 'json'
            })
                .then(response => {


                    this.labels = response.data;

                })
                .catch(error => {
                    console.log(error.response.data)
                })
        },

        add_like: function () {
            axios.post(this.host+'/question/like/',{
                        like_state: this.like_state,
                        question_id: this.question.id
                    }, {headers: {
                                'Authorization': 'JWT ' + this.token
                                    },
                                responseType: 'json',
                                withCredentials: true
                    })
                .then(response => {


                   alert('ok');
                    this.flush()

                })
                .catch(error => {
                    alert('已经点过了,亲')

                    this.like_state = '';
                    this.flush();

                    console.log(error.response.message);

                })
        },

        cancel_like:function () {
             axios.post(this.host+'/question/cancel_like/',{
                        like_state: this.like_state,
                        question_id: this.question.id
                    }, {

                        headers: {
                                'Authorization': 'JWT ' + this.token
                                    },
                                responseType: 'json',
                                withCredentials: true
                    })
                .then(response => {


                   alert('取消顶踩');
                   this.like_state = '';
                    this.flush()

                })
                .catch(error => {
                    alert('还未顶踩')


                    this.flush();

                    console.log(error.response.message);

                })

        },

        on_comment: function (num) {

            if (this.user_id) {
                if (num != this.answer_id) {
                    this.answer_id = num;

                } else {
                    this.answer_id = 0;


                }
            } else {
                alert('请先登陆')
            }
        },


        on_like_question:function (num) {
            if (this.user_id){
                if (num == '1'){
                    this.like_state = 1;
                    this.add_like();

                } else {
                    this.like_state = 2;
                    this.add_like();
                }

            }else{
                alert("请登录")
            }

        },

        on_cancel_like:function (){
            if (this.user_id) {
                this.cancel_like()
            }else{
                alert("请登录")
            }
        }


    },
     filters:{
        // 1 字符串类型日期 转 日期类型日期 str2date
        // 2 日期 -获取年月日  date2ymmd
        // 3 日期 - 获取十分秒 date2hms
        // 4 日期 - 星期 周  date2w
        // 显示 年月日 时分
        str2date:function (value) {
            return new Date(value)
        },
        date2ymd:function (value) {
            return value.getFullYear() + "年" + (value.getMonth()+1) + "月" + value.getDate() + "日"
        },
        date2hms:function (value) {
            return value.getHours() + ":" +value.getMinutes()
        }
    },
})